<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useCollectionReviewStore } from '../../store/collectionReview';
import { onMounted } from 'vue';
import type { ComponentSize } from 'element-plus'
import collection from '../../api/collection';
import utils from '../../utils/utils';
import { useDrawerStore } from '../../store/drawer';
const drawerStore = useDrawerStore();
const collectionReviewStore = useCollectionReviewStore();
const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('default')
async function handleSizeChange() {
    await collection.getCollectionReviewListtable(collectionReviewStore.pageNum, collectionReviewStore.pageSize).then(res => {
        collectionReviewStore.collectionReviewTable = res.data.data
    }).catch(error => {
        console.error('获取数据失败：', error);
    }).finally(() => {
        collectionReviewStore.changeLoading()
    });
}
async function handleCurrentChange() {
    await collection.getCollectionReviewListtable(collectionReviewStore.pageNum, collectionReviewStore.pageSize).then(res => {
        collectionReviewStore.collectionReviewTable = res.data.data
    }).catch(error => {
        console.error('获取数据失败：', error);
    }).finally(() => {
        collectionReviewStore.changeLoading()
    });
}
async function submitCollectionReview(ids: number | number[]) {
    const idArray = Array.isArray(ids) ? ids : [ids];
    try {
        // 假设后端接口支持批量审核，需要修改API调用
        await collection.updateCollectionReview(idArray);
        await collection.getCollectionReviewSpecie(
            collectionReviewStore.pageNum,
            collectionReviewStore.pageSize,
            null,
            null,
            null
        ).then(res => {
            collectionReviewStore.collectionReviewTable = res.data.data
            collectionReviewStore.collectionStats.totalReview = res.data.total
        })
        /*await collection.getCollectionReviewListtable(
            collectionReviewStore.pageNum,
            collectionReviewStore.pageSize
        ).then(res => {
            collectionReviewStore.collectionReviewTable = res.data.data
        });*/
        // 清空选中
        collectionReviewStore.selectedIds = [];
    } catch (error) {
    } finally {
        collectionReviewStore.changeLoading();
    }

}
async function seeCollectionReviewDetail(id) {
    await collection.getCollectionDetail(id).then(res => {
        drawerStore.setDrawer()
        drawerStore.setContainer(res.data.data)
    })
}

// 新增：处理选择变化
const handleSelectionChange = (selection: any[]) => {
    collectionReviewStore.selectedIds = selection.map(item => item.id);
};
onMounted(async () => {
    await collection.getCollectionReviewListtable(collectionReviewStore.pageNum, collectionReviewStore.pageSize).then(res => {
        collectionReviewStore.collectionReviewTable = res.data.data
    }).catch(error => {
        console.error('获取数据失败：', error);
    }).finally(() => {
        collectionReviewStore.changeLoading()
    });
})
</script>
<template>
    <el-table row-key="id" v-loading="collectionReviewStore.Loading" :data="collectionReviewStore.collectionReviewTable"
        height="600px" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" header-align="center" reserve-selection />
        <el-table-column label=" 封面" width="120" align="center" header-align="center" fixed>
            <template #default="scope"><el-image style="width: 100px; height: 100px; max-width: 90vw; max-height: 90vh"
                    :src="scope.row.img" fit="contain" :preview-src-list="[scope.row.img]"
                    :preview-teleported="true" /></template>
        </el-table-column>
        <el-table-column property="name" label="名称" width="140" align="center" header-align="center" />
        <el-table-column property="subcategory" label="分类" width="120" align="center" header-align="center" />
        <el-table-column property="donorName" label="捐赠人" width="120" align="center" header-align="center" />
        <el-table-column property="createdAt" sortable label="申请时间" width="180" align="center" header-align="center">
            <template #default="scope">{{ utils.formatDate(scope.row.createdAt) }}</template>
        </el-table-column>
        <el-table-column property="submitUser" label="申请人" width="120" align="center" header-align="center" />
        <el-table-column property="isAdd" label="状态" width="120" align="center" header-align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.isAdd === 1" type="success">已通过</el-tag>
                <el-tag v-else type="danger">待审核</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center" header-align="center">
            <template #default="scoped">
                <el-button type="success" size="small" @click="submitCollectionReview(scoped.row.id)">
                    <el-icon>
                        <Check />
                    </el-icon>
                    {{ scoped.row.isAdd === 1 ? '已通过' : '通过' }}
                </el-button>
                <el-button type="danger" size="small"><el-icon>
                        <CloseBold />
                    </el-icon>拒绝</el-button>
                <el-button type="primary" size="small" @click="seeCollectionReviewDetail(scoped.row.id)"><el-icon>
                        <Message />
                    </el-icon>详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="collectionReviewStore.pageNum"
            v-model:page-size="collectionReviewStore.pageSize" :page-sizes="[5, 10, 15, 20]" :size="size"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="collectionReviewStore.collectionStats.totalReview" @update:page-size="handleSizeChange"
            @update:current-page="handleCurrentChange" />
    </div>
</template>

<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-image-viewer__wrapper {
    background: rgba(0, 0, 0, 0.8) !important;
}

.el-image-viewer__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

@media (max-width: 768px) {
    :deep(.el-pagination .el-pagination__sizes) {
        display: none;
    }

    .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
        display: none;
    }
}
</style>
